<template>
	<view class="seekItem">
		<view class="item_header">
			<image :src="info.header_image"></image>
			<view class="message">
				<view class="name">{{ info.username }}</view>
				<view class="time">{{ '2021-12-25 10:10:10' }}</view>
			</view>
		</view>
		<view class="content">{{ info.content.text }}</view>
		<view class="img_list">
			<image 
					v-for="(item, i) in info.content.images" 
					:key="i" 
					:src="item"
					:class="{ img: info.content.images.length > 1 }"
					:mode="info.content.images.length > 1 ? 'aspectFill' : 'aspectFit'"
					@click="() => clickImg(i)"
			></image>
		</view>
		<!-- <view class="btn_group">
			<view>加入寻找</view>
			<view>提供线索</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		data() {
			return {
				path: '1'
			};
		},
		methods: {
			clickImg(index) {
				// console.log(index)
				uni.previewImage({
					urls: this.info.content.images,
					current: index,
					// longPressActions: {
					// 	itemList: ['保存图片'],
					// 	success: (i, tapIndex) => {
					// 		if (tapIndex === 0) {
					// 			return void uni.saveImageToPhotosAlbum({
					// 				filePath: this.info.content.images[i],
					// 				success: (path, res) => {
					// 					console.log(path, res)
					// 				}
					// 			})
					// 		}
					// 	}
					// }
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.seekItem {
	margin: 10px 0;
	padding: 10px 12px;
	background-color: white;
	.item_header {
		display: flex;
		align-items: center;
		margin: 5px 0;
		image {
			width: 35px;
			height: 35px;
			border-radius: 5px;
			margin-right: 8px;
		}
		.message {
			.name {
				font-size: 14px;
				margin: 7px 0 3px;
			}
			.time {
				font-size: 10px;
				color: #999999;
			}
		}
	}
	
	.content {
		margin-bottom: 8px;
		text-align: justify;
	}
	.img_list {
		.img {
			width: calc(33.33vw - 2px - 8px);
			margin-right: 2px;
			height: calc(33.33vw - 2px - 8px);
		}
	}
}
</style>
